<template>
    <div class="home flex flexHc">
        <div class="content flex ">
            <img src="@/assets/systemname.png" alt="" class="systemname">
            <div class="container flex">
                <div class="container_list flex flexCen" >
                    <div class="container_item flex">
                        <div class="container_item_one">首页</div>
                        <div class="container_item_four">数据指标</div>
                        <div class="container_item_one container_item_change">热源</div>
                        <div class="container_item_three">换热站</div>
                    </div>
                    <div class="container_item flex flexEnd">
                        <div class="container_item_one">机组</div>
                        <div class="container_item_one">户</div>
                        <div class="container_item_one">组</div>
                        <div class="container_item_one">户</div>
                    </div>
                </div>
                <div class="contennt flex">
                    <div class="contennt_l">
                        <div class="contennt_l_title flex flexEnd">
                            <div class="title_item title_item_l" :class="[nav==1?'title_item_choose':'']" @click="changeNav(1)">热源信息</div>
                            <div class="title_item title_item_r" :class="[nav==2?'title_item_choose':'']" @click="changeNav(2)">实时数据</div>
                        </div>
                        <div class="contennt_l_body"  v-if="nav == 1">
                            <div class="content_info">
                                <div class="content_info_list flex">
                                    <div class="content_info_item flex">
                                        <div class="content_info_title">热源名称：</div>
                                        <div class="content_info_body">热电厂</div>
                                    </div>
                                </div>
                                <div class="content_info_list flex">
                                    <div class="content_info_item flex">
                                        <div class="content_info_title">额定供热能力：</div>
                                        <div class="content_info_body">热电厂</div>
                                    </div>
                                </div>
                                <div class="content_info_list flex">
                                    <div class="content_info_item flex">
                                        <div class="content_info_title">经度坐标：</div>
                                        <div class="content_info_body">116.286986</div>
                                    </div>
                                </div>
                                <div class="content_info_list flex">
                                    <div class="content_info_item flex">
                                        <div class="content_info_title">纬度坐标：</div>
                                        <div class="content_info_body">39.969369</div>
                                    </div>
                                </div>
                                <div class="content_info_list flex">
                                    <div class="content_info_item flex">
                                        <div class="content_info_title">热源供热形式类型：</div>
                                        <div class="content_info_body">热电联产</div>
                                    </div>
                                </div>
                                <div class="content_info_list flex">
                                    <div class="content_info_item flex">
                                        <div class="content_info_title">热源能源类型：</div>
                                        <div class="content_info_body">燃煤</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="contennt_l_body flex"  v-else>
                            <div class="conent_relatimeinfo flex">
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">数据采集时间：</div>
                                    <div class="conent_relatimeinfo_item_body">2020-09-09 07：23：45</div>
                                </div>
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源供水温度：</div>
                                    <div class="conent_relatimeinfo_item_body">90℃</div>
                                </div>
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源回水温度：</div>
                                    <div class="conent_relatimeinfo_item_body">90℃</div>
                                </div>
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源瞬时流量：</div>
                                    <div class="conent_relatimeinfo_item_body">90 T</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源瞬时热量：</div>
                                    <div class="conent_relatimeinfo_item_body">90GJ/h</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源供水压力：</div>
                                    <div class="conent_relatimeinfo_item_body">100MPa</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源回水压力：</div>
                                    <div class="conent_relatimeinfo_item_body">100MPa</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源瞬时补水量：</div>
                                    <div class="conent_relatimeinfo_item_body">100T/h</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源累计补水量：</div>
                                    <div class="conent_relatimeinfo_item_body">100T</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源累计流量：</div>
                                    <div class="conent_relatimeinfo_item_body">100T</div>
                                </div>

                            </div>
                            <div class="conent_relatimeinfo flex">
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源累计热量：</div>
                                    <div class="conent_relatimeinfo_item_body">2020-09-09 07：23：45</div>
                                </div>
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源累计电量：</div>
                                    <div class="conent_relatimeinfo_item_body">热电厂</div>
                                </div>
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">烟气NOX折算：</div>
                                    <div class="conent_relatimeinfo_item_body">90℃</div>
                                </div>
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">烟气颗粒物折算：</div>
                                    <div class="conent_relatimeinfo_item_body">90 T</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">SO2（二氧化硫）：</div>
                                    <div class="conent_relatimeinfo_item_body">90GJ/h</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">O2（氧气）：</div>
                                    <div class="conent_relatimeinfo_item_body">燃煤</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">NO（一氧化氮）：</div>
                                    <div class="conent_relatimeinfo_item_body">116.286986</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">NOX（多氧化氮）：</div>
                                    <div class="conent_relatimeinfo_item_body">39.969369</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">延期果粒物：</div>
                                    <div class="conent_relatimeinfo_item_body">热电联产</div>
                                </div><div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源供水压力：</div>
                                    <div class="conent_relatimeinfo_item_body">燃煤</div>
                                </div>

                            </div>
                            <div class="conent_relatimeinfo flex">
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源瞬时补水量：</div>
                                    <div class="conent_relatimeinfo_item_body">100T/h</div>
                                </div>
                                <div class="conent_relatimeinfo_item flex">
                                    <div class="conent_relatimeinfo_item_title">热源累计电量：</div>
                                    <div class="conent_relatimeinfo_item_body">100T</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="contennt_r"></div>
                </div>

            </div>
        </div>
        <div class="mask" v-if="isshow">
            <div class="maskTitle flex flexBei flexVc">
                <img src="@/assets/editheat.png" alt="" class="editheat_img">
                <img src="@/assets/close.png" alt="" class="close_img" @click="close()">
            </div>
            <div class="maskContent flex">
                <div class="maskContent_list">
                    <div class="maskContent_item flex ">
                        <div class="maskContent_item_title flex flexEnd">
                            <span class="maskContent_item_title1">*</span>
                            <span class="maskContent_item_title2">热源名称：</span>
                        </div>
                        <div class="maskContent_item_body">
                            <input type="text" placeholder="请输入">
                        </div>
                    </div>
                    <div class="maskContent_item flex ">
                        <div class="maskContent_item_title flex flexEnd">
                            <span class="maskContent_item_title1">*</span>
                            <span class="maskContent_item_title2">额定供热能力：</span>
                        </div>
                        <div class="maskContent_item_body">
                            <input type="text" placeholder="请输入">
                        </div>
                    </div>
                    <div class="maskContent_item flex ">
                        <div class="maskContent_item_title flex flexEnd">
                            <span class="maskContent_item_title2">经度坐标：</span>
                        </div>
                        <div class="maskContent_item_body">
                            <input type="text" placeholder="请输入">
                        </div>
                    </div>
                    <div class="maskContent_item flex ">
                        <div class="maskContent_item_title flex flexEnd">
                            <span class="maskContent_item_title2">纬度坐标：</span>
                        </div>
                        <div class="maskContent_item_body">
                            <input type="text" placeholder="请输入">
                        </div>
                    </div>
                    <div class="maskContent_item flex ">
                        <div class="maskContent_item_title flex flexEnd">
                            <span class="maskContent_item_title1">*</span>
                            <span class="maskContent_item_title2">热源供热形式类型：</span>
                        </div>
                        <div class="maskContent_item_body">
                            <input type="text" placeholder="请选择">
                            <div class="img_area flex flexCen">
                                <img src="@/assets/icon_select.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="maskContent_item flex ">
                        <div class="maskContent_item_title flex flexEnd">
                            <span class="maskContent_item_title1">*</span>
                            <span class="maskContent_item_title2">热源能源类型：</span>
                        </div>
                        <div class="maskContent_item_body">
                            <input type="text" placeholder="请选择">
                            <div class="img_area flex flexCen">
                                <img src="@/assets/icon_select.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="maskContent_item  maskContent_item1 flex ">
                        <div class="maskContent_item_title flex flexEnd">
                        </div>
                        <div class="maskContent_item_body1 flex flexEnd">
                            <div class="save_btn">保存</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import API from '@/request/api'
export default {
    name: 'home',
    components: {
    },
    data() {
        return {
            nav: 1,
            isshow: false
        }
    },
    mounted() {
    },
    methods: {
        // 改变上方nav
        changeNav(type) {
            this.nav = type
            // 实时数据
            if(this.nav == 2){

            }
        },
        // 关闭弹框
        close() {
            this.isshow = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.home{
    height: 1080px;
    width: 100%;
    background: url('../assets/nav_bg.png') ;
    background-size:100% 100%;
    position: relative;
    .content{
        width: 100%;
        flex-direction: column;
        .systemname{
            width: 100%;
            height: 96px;
        }
        .container{
            flex-direction: column;
            margin: 0px 62px;
            margin-top: -20px;
            .container_list{
                width: 100%;
                height: 38px;
                .container_item{
                    width: 50%;
                    height: 38px;
                    line-height: 38px;
                    font-size: 17px;
                    font-weight: 400;
                    text-align: justifyLeft;
                    color: #ffffff;
                    .container_item_change{
                        color: #00E4FF;
                    }
                    .container_item_one{
                        margin-right: 34px;
                        background: url('../assets/two.png');
                        background-size:100% 100%;
                        width: 102px;
                    }
                    .container_item_four{
                        background: url('../assets/four.png');
                        background-size:100% 100%;
                        width: 142px;;
                        margin-right: 34px;
                    }
                    .container_item_three{
                        background: url('../assets/three.png');
                        background-size:100% 100%;
                        width: 114px;;
                    }
                    .container_item_four1{
                        margin-right: 392px;
                    }
                }
            }
            .contennt{
                margin-top: 28px;
                .contennt_l{
                    flex-shrink: 1;
                    width: 100%;
                    height: 902px;
                    margin-right: 14px;
                    .contennt_l_title{
                        width: 100%;
                        .title_item{
                            width: 180px;
                            height: 50px;
                            opacity: 1;
                            background: rgba(12,132,255,0.16);
                            border: 1px solid #008aff;
                            // background: url('../assets/nav.png');
                            background-size:100% 100%;
                            text-align: center;
                            line-height: 50px;
                            font-size: 20px;
                            font-weight: 400;
                            color: #00E4FF;
                        }
                        .title_item_l{
                            border-right: 0px;
                            border-radius: 5px 0px 0px 0px;
                        }
                        .title_item_r{
                            border-radius: 0px 5px 0px 0px;
                        }
                        .title_item_choose{
                            background: #2063a8;
                            color: #ffffff;
                            // background: url('../assets/choosenav.png');
                        }
                        .title_item{
                            border-bottom: 0px;
                        }

                    }
                    .contennt_l_body{
                        width: calc(100% - 48px);
                        height: 804px;
                        padding: 24px;
                        background: url('../assets/body_bg.png') ;
                        background-size:100% 100%;
                        .content_info{
                            width: 100%;
                            margin-top: 78px;
                            .content_info_list{
                                width: 100%;
                                margin-top: 48px;
                                .content_info_item{
                                    width: 50%;
                                    .content_info_title{
                                        width: 300px;
                                        text-align: right;
                                        font-size: 20px;
                                        font-weight: 400;
                                        color: #cee1f3;
                                        flex-shrink: 0;
                                    }
                                    .content_info_body{
                                        width: 100%;
                                        flex-shrink: 1;
                                        font-size: 20px;
                                        font-weight: 400;
                                        text-align: left;
                                        color: #00e4ff;
                                        margin-left: 38px;
                                    }
                                }
                            }
                        }
                        .conent_relatimeinfo{
                            margin-top: 72px;
                            flex-direction: column;
                            width: 100%;
                            flex-shrink: 1;
                            .conent_relatimeinfo_item{
                                margin-top: 48px;
                                width: 100%;
                                .conent_relatimeinfo_item_title{
                                    width: 230px;
                                    text-align: right;
                                    font-size: 20px;
                                    font-weight: 400;
                                    color: #cee1f3;
                                    flex-shrink: 0;
                                }
                                .conent_relatimeinfo_item_body{
                                        width: 100%;
                                        flex-shrink: 1;
                                        font-size: 20px;
                                        font-weight: 400;
                                        text-align: left;
                                        color: #00e4ff;
                                        margin-left: 38px;
                                    }

                            }

                        }
                    }
                }
                .contennt_r{
                    flex-shrink: 0;
                    width: 216px;
                    height: 862px;
                    padding: 20px 16px;
                    background: url('../assets/right_bg.png') ;
                    background-size:100% 100%;
                    .search_area{
                        width: 100%;
                        height: 42px;
                        position: relative;
                        background: url('../assets/search_input.png') ;
                        background-size:100% 100%;
                        input{
                            width: calc(100% - 60px);
                            height: 100%;
                            padding-left: 10px;
                            padding-right: 50px;
                            line-height: 42px;
                        }
                        img{
                            position: absolute;
                            right: 15px;
                            top: 11px;
                            width: 20px;
                            height: 20px;
                        }
                    }
                    .select_area{
                        margin-top: 18px;
                        height: 738px;
                        overflow-y: auto;
                        flex-direction: column;
                        .select_area_item{
                            flex-direction: column;
                            width: 100%;
                            .select_one{
                                width: 100%;
                                height: 40px;
                                opacity: 1;
                                background: rgba(19,41,77,0.42);
                                border: 2px solid #00a0e9;
                                background: url('../assets/open_input.png') ;
                                background-size:100% 100%;
                                .select_one_img{
                                    margin: 0px 20px;
                                    width: 14px;
                                    height: 8px;
                                }
                                span{
                                    font-size: 18px;
                                    font-weight: bold;
                                    text-align: left;
                                    color: #ffffff;
                                }
                            }
                            .seclct_other{
                                flex-direction: column;
                                width: 100%;
                                .seclct_two{

                                }

                            }
                        }

                    }
                    .putaway{
                        margin-top: 18px;
                        width: 100%;
                        height: 44px;
                        background: #156fcb;
                        border: 1px solid #008aff;
                        border-radius: 4px;
                        text-align: center;
                        line-height: 44px;
                        font-size: 16px;
                        font-weight: 400;
                        color: #cee1f3;
                    }
                }
            }

        }

    }
    .mask{
        position: absolute;
        width: 910px;
        height: 602px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border: 1px solid #00a0e9;
        z-index: 100;
        background: url('../assets/mask_bg.png');
        background-size:100% 100%;
        .maskTitle{
            height: 50px;
            width: 100%;
            background: rgba(8,78,150,0.29);
            .editheat_img{
                margin-left: 22px;
                width: 108px;
                height: 20px;
            }
            .close_img{
                margin-right: 22px;
                width: 16px;
                height: 16px;
            }
        }
        .maskContent{
            width: 100%;
            height: 552px;
            .maskContent_list{
                margin-top: 25px;
                .maskContent_item{
                    margin-top: 25px;
                    .maskContent_item_title{
                        width: 222px;
                        text-align: right;
                        font-size: 18px;
                        font-weight: 400;
                        line-height: 42px;
                        .maskContent_item_title1{
                            color: #ff3838;
                        }
                        .maskContent_item_title2{
                            color: #CEE1F3;
                        }
                    }
                    .maskContent_item_body{
                        background: url('../assets/details_input.png') ;
                        background-size:100% 100%;
                        width: 280px;
                        height: 42px;
                        position: relative;
                        input{
                            margin-left: 28px;
                            margin-right: 28px;
                            width: calc(100% - 56px);
                            height: 100%;
                            font-size: 18px;
                            font-weight: 400;
                            text-align: left;
                            color: #00e4ff;
                        }
                        ::-webkit-input-placeholder { /* WebKit browsers */
                            color: #00e4ff;
                        }
                        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                            color: #00e4ff;
                        }
                        ::-moz-placeholder { /* Mozilla Firefox 19+ */
                            color: #00e4ff;
                        }
                        :-ms-input-placeholder { /* Internet Explorer 10+ */
                            color: #00e4ff;
                        }
                        .img_area{
                            position: absolute;
                            width: 28px;
                            height: 100%;
                            top: 0;
                            right: 0;
                            img{
                                width: 12px;
                                height: 8px;
                            }
                        }

                    }
                    .maskContent_item_body1{
                        width: 280px;
                        height: 42px;
                        position: relative;
                        .save_btn{
                            width: 144px;
                            height: 44px;
                            opacity: 1;
                            background: #156fcb;
                            border: 1px solid #008aff;
                            border-radius: 5px;
                            font-size: 20px;
                            font-weight: 400;
                            text-align: center;
                            line-height: 44px;
                            color: #ffffff;
                        }
                    }
                }
                .maskContent_item1{
                    margin-top: 30px;
                }
            }
        }
    }
}
</style>
